<template>
	<view class="indexContainer">
		<!-- 头部 -->
		<view class="header">
			<!-- 头部搜索 -->
			<view class="headerSearch">
				<view class="searchList">
					<text class="iconfont search searchIcon"></text>
					<input class="searchIpt" type="text" placeholder="商品名/品牌/订单号/型号等">
					<view class="searchBtn" size="mini">搜索</view>
				</view>
				<text class="tel iconfont kefu"></text>
			</view>
			<!-- 头部导航 -->
			<view class="headerNav">
				<scroll-view class="navScroll" scroll-x="true" enable-flex>
					<view class="navScrollItem" :class="{active:currentNav === -1}" @click="currentNav = -1">
						<text class="navTitle">首页</text>
						<text class="selectLine" v-if="currentNav === -1"></text>
					</view>
					<view class="navScrollItem" :class="{active:currentNav === nav.id}" v-for="nav in navListData" :key="nav.id" @click="changeNav(nav.id)">
						<text class="navTitle ">{{nav.title}}</text>
						<text class="selectLine" v-if="currentNav === nav.id"></text>
					</view>
				</scroll-view>
				<view class="moreCategory iconfont more_"></view>
			</view>
		</view>
		<view class="main">
			<scroll-view class="mainScroll" scroll-y="true">
				<!-- 轮播图部分 -->
				<view class="swiperBg">
					<swiper class="swiper" autoplay  @change="tabChange">
						<swiper-item class="swiperItem" v-for="banner in bannerListData" :key="banner.id">
							<image :src="banner.img"></image>
						</swiper-item>
					</swiper>
					<image src="https://dist.vipmro.com/smb/m-static/static/img/index-slider-bg.5fe4c09.png"></image>
					<view class="bannerCount">
						{{swiperIndex}} / {{bannerListData.length}}
					</view>
				</view>
				<!-- 品牌图片部分 -->
				<view class="bannerImg">
					<image src="https://image3.vipmro.net/mallAdver/1ede3326-b8c4-4953-83d4-33167281e133.png"></image>
				</view>
				<!-- 图标列表部分 -->
				<view class="iconList">
					<view class="iconItem" v-for="icon in iconListData" :key="icon.id">
						<image class="iconImg" :src="icon.iconUrl"></image>
						<text class="iconText">{{icon.title}}</text>
					</view>
				</view>
				<!-- 新闻box -->
				<view class="newBox">
					<view class="newContainer">
						<view class="newLeft">
							<image class="leftTop" :src="activeNewData.mainImg"></image>
							<view class="leftMain">
								<image class="leftMainImg" :src="activeNewData.goods.image"></image>
								<view class="leftMainDes">
									<view class="desTitle">{{activeNewData.goods.goodsName}}</view>
									<view class="desImg">{{activeNewData.goods.labelName}}</view>
								</view>
							</view>
							<view class="leftBottom">
								<image class="msImg" :src="activeNewData.priceImg"></image>
								<view class="msPic">
									<text class="msPic1">￥</text>
									<text class="msPic2">{{activeNewData.goods.morningPrice}}0</text>
									<text class="msPic3">{{activeNewData.goods.price}}</text>
								</view>
							</view>
						</view>
						<view class="newRight">
							<image class="newRight1" :src="activeNewData.details[0].icon"></image>
							<image class="newRight2" :src="activeNewData.details[1].icon"></image>
							<image class="newRight3" :src="activeNewData.details[2].icon"></image>
						</view>
					</view>
				</view>
				<!-- 公共部分 -->
				<view class="common">
					<view class="commonHeader">
						<text class="iconfont icon-hot commonIcon"></text>
						<text class="commonTitle">{{hotBuyGoodsListData.config.title}}</text>
						<text class="hotTitle3">{{hotBuyGoodsListData.config.subtitle}}</text>
					</view>
					<scroll-view class="commonScroll" scroll-x="true" enable-flex>
						<view class="scrollItem" v-for="goods in hotBuyGoodsListData.goods" :key="goods.id">
							<image class="commonImg" :src="goods.goodsImg"></image>
							<text class="commonDes">{{goods.goodsName}}</text>
							<view class="commonPrice">
								<view>
									<text class="qiLogo">企</text>
									<text class="commonPic1">￥{{goods.priceMap.salePrice}}</text>
								</view>
								<text class="commonPic2">{{goods.priceMap.price}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 商品列表部分 -->
				<view class="goods">
					<view class="goodsHeader">
						<text class="iconfont anquan goodsIcon"></text>
						<text class="goodsTitle">产原地精选</text>
					</view>
					<scroll-view class="goodsScroll" scroll-x="true" enable-flex>
						<view class="goodsScrollItem" v-for="goods in factoryGoodsListData" :key="goods.id" @click="changeGoods(goods.id)">
							<text class="itemTop" :class="{active:currentGoodsId === goods.id}">{{goods.mainLabel}}</text>
							<text class="itemBottom" :class="{active:currentGoodsId === goods.id}">{{goods.subLabel}}</text>
						</view>
					</scroll-view>
					<image src="https://image3.vipmro.net//smbPchomeImg/5acfb7e3-ea79-47d8-89a5-677e62f50ab6.jpg"></image>
			
				<view class="goodsItem" v-for="goodsItem in factoryGoodsItemData" :key="goodsItem.sellerGoodsId">
						<image :src="goodsItem.image"></image>
						<view class="goodsItemInfo">
							<view class="goodsItemDes">{{goodsItem.title}}</view>
							<view class="goodsPrice">
								<text>
									<text class="qiLogo">企</text>
									<text class="commonPic1">￥{{goodsItem.price}}</text>
								</text>
								<text class="commonPic2">{{goodsItem.salePrice}}</text>
							</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		name:'Index',
		data() {
			return {
				currentNav : -1,
				currentGoodsId:8,
				swiperIndex:1,
			}
		},
		mounted(){
			this.getNavListData()
			this.getBannerListData()
			this.getIconListData()
			this.getActiveNewData()
			this.getHotBuyGoodsListData()
			this.getFactoryGoodsList()
			this.getFactoryGoodsItem()
		},
		methods: {
			getNavListData(){
				this.$store.dispatch('home/getNavListData')
			},
			getBannerListData(){
				this.$store.dispatch('home/getBannerListData')
			},
			getIconListData(){
				this.$store.dispatch('home/getIconListData')
			},
			getActiveNewData(){
				this.$store.dispatch('home/getActiveNewData')
			},
			getHotBuyGoodsListData(){
				this.$store.dispatch('home/getHotBuyGoodsList')
			},
			getFactoryGoodsList(){
				this.$store.dispatch('home/getFactoryGoodsList')
			},
			getFactoryGoodsItem(id){
				this.$store.dispatch('home/getFactoryGoodsItem',id)
			},
			changeNav(id){
				this.currentNav = id
			},
			changeGoods(id){
				this.currentGoodsId = id
				this.getFactoryGoodsItem(id)
			},
			tabChange(e) {
				this.swiperIndex = e.detail.current+1;
				}
		},
		computed:{
			...mapState('home',['navListData','bannerListData','iconListData','activeNewData','hotBuyGoodsListData','factoryGoodsListData','factoryGoodsItemData'])
		}
	}
</script>

<style lang="stylus">
	// 头部样式
	.header
		width: 100%
		height: 170upx
		background-color:#06062e 
		// 头部搜索样式
		.headerSearch
			display: flex
			justify-content:space-evenly
			align-items: center
			height: 90upx
			background-color: #06062e
			.searchList
				display: flex
				justify-content: space-around
				align-items: center
				width: 640upx
				height: 60upx
				background-color: #fff
				border-radius: 40upx
				.searchIcon
					line-height: 60upx
					font-size: 46upx
					font-weight: 800
					color: #ccc
				.searchIpt
					width: 342upx
				input
				&::-webkit-input-placeholder
					color: #030303
					font-size: 26upx
				.searchBtn
					width: 60upx
					height: 26upx
					font-size: 28upx
					line-height: 26upx
					padding-left: 20upx
					border-left: 1px solid #ccc
					color: #fa210a
					font-weight: 800
			.tel
				width: 60upx
				height: 60upx
				font-size: 46upx
				font-weight: 800
				color: #fff
				text-align: center
				line-height: 60upx
		// 头部导航样式
		.headerNav
			display: flex
			height: 80upx
			background-color: #06062e 
			.navScroll
				display: flex
				justify-content: space-between
				width: 648upx
				height: 80upx
				.navScrollItem
					position:relative
					align-items: center
					text-align: center
					&.active
						font-size: 38upx
						font-weight: 800
					.navTitle
						height: 60upx
						line-height: 50upx
						color: #fff
					.selectLine
							position: absolute
							top:60upx
							right: 0
							bottom:0
							left:0
							margin: 0 auto
							width: 36upx
							height: 6upx
							border-radius: 30upx
							background-color: #fff
			.moreCategory
				width: 102upx
				height: 80upx
				font-size: 46upx
				font-weight: 800
				color: #fff
				text-align: center
				line-height: 60upx
	.main
		background-color: #f2f2f0
		.mainScroll
		// 轮播图样式
			.swiperBg
				position: relative
				width: 100%
				height: 280upx
				background-color: #06062e 
				image
					position: absolute
					bottom: 0
					width: 100%
					height: 120upx
				.swiper
					position: absolute
					left: 40upx
					z-index: 999
					width: 100%
					height: 280upx
					.swiperItem
						width: 90%
						image
							width: 90%
							height: 100%
							border-radius: 20upx
							
				.bannerCount
					position: absolute
					z-index: 99999
					width: 90upx
					height: 36upx
					bottom: 10upx
					right: 36upx
					border-radius: 40upx
					background: rgba(0,0,0,.3)
					text-align: center
					line-height: 36upx
					color: #fff
					font-size: 24upx
		//品牌图片样式
		// 品牌图片列表
		.bannerImg
			width: 100%
			height: 70upx
			image
				width: 100%
				height: 100%
	//icon图标列表样式
		.iconList
				display: flex
				margin-top: 30upx
				width: 100%
				height: 166upx
				.iconItem
					display: flex
					flex-direction: column
					width: 150upx
					height: 100%
					align-items: center
				image
					width: 88upx
					height: 88upx
				.iconText
					text-align: center
					color: #262626
					font-size: 24upx
					margin-top: 20upx
		// 新闻框部分样式
		.newBox
			width: 100%
			height: 296upx
			padding: 0 10upx 20upx 20upx
			background-color: #f2f2f0
			.newContainer
				display: flex
				width: 720upx
				height: 296upx
				.newLeft
					width: 340upx
					height: 100%
					border-radius: 40upx
					padding: 10upx
					box-sizing: border-box
					background-color: #dbeafd
					.leftTop
						width: 202upx
						height: 32upx
					.leftMain
						display: flex
						width: 320upx
						height: 140upx
						.leftMainImg
							width: 140upx
							height: 140upx
						.leftMainDes
							width: 170upx
							height: 128upx
							.desTitle
								width: 170upx
								height: 72upx
								margin-left: 10upx
								font-size: 26upx
								overflow: hidden
								text-overflow: ellipsis
								display: -webkit-box
								-webkit-line-clamp: 2
								-webkit-box-orient: vertical
							.desImg
								width: 146upx
								height: 44upx
								margin-top: 20upx
								border-radius: 4upx
								font-size: 26upx
								color: #fff
								padding: 4upx 6upx
								white-space: nowrap
								background: linear-gradient(213deg,#fad961,#f76b1c);
					.leftBottom
						display: flex
						width: 320upx
						height: 50upx
						border-radius: 10upx
						margin-top: 30upx
						image
							width: 130upx
							height: 50upx
						.msPic
							width: 200upx
							height: 50upx
							line-height: 50upx
							background-color: #fa210a
							border-top-right-radius: 4upx
							border-bottom-right-radius: 4upx
							.msPic1
								font-size: 22upx
								color: #fff
								font-weight: 700
							.msPic2
								font-size: 30upx
								color: #fff
							.msPic3
								font-size: 22upx
								color: #ccc
								margin-left: 20upx
								text-decoration: line-through
				.newRight
					width: 360upx
					height: 100%
					margin-left:20upx
					.newRight1
						width: 170upx
						height: 172upx
						margin-right: 10upx
					.newRight2
						width: 170upx
						height: 172upx
					.newRight3
						width: 360upx
						height: 106upx
						margin-top: 10upx
		.common
			width: 100%
			height: 500upx
			background-color: #fff
			.commonHeader
				width: 95%
				height: 100upx
				line-height: 100upx
				margin-left: 18upx
				background-color: #fff
				.commonIcon
					font-size: 40upx
					color: #ff340f
				.commonTitle
					font-size: 34upx
					margin-left: 20upx
					color: #000
					font-weight: 800
				.hotTitle3
					font-size: 24upx
					margin-left: 20upx
					color: #999
			.commonScroll
				height: 358upx
				display: flex
				.scrollItem
					width: 210upx
					height: 100%
					padding: 0 10upx
					margin-left: 20upx
					.commonImg
						width: 210upx
						height: 210upx
					.commonDes
						font-size: 22upx
						color: #333
						overflow: hidden
						text-overflow: ellipsis
						display: -webkit-box
						-webkit-line-clamp: 2
						-webkit-box-orient: vertical
					.commonPrice
						font-size: 26upx
						margin-top: 6upx
						.qiLogo
							width: 28upx
							height: 30upx
							padding: 2upx
							border-radius: 4upx
							box-sizing: border-box
							font-size: 26upx
							color: #fff
							background-color: #ff3437
						.commonPic1
							width: 180upx
							font-size: 28upx
							color: #ff3437
							font-weight: 800
							margin-left: 6upx
						.commonPic2
							font-size: 24upx
							color: #888
							text-decoration: line-through
		.goods
			background-color: #f2f2f0
			.goodsHeader
				width: 95%
				height: 100upx
				line-height: 100upx
				margin-left: 18upx
				background-color: #fff
				.goodsIcon
					font-size: 40upx
					color: #ff340f
				.goodsTitle
					font-size: 34upx
					margin-left: 20upx
					color: #000
					font-weight: 800
			.goodsScroll
				width: 100%
				height: 112upx
				display: flex
				flex-shrink: 0
				background-color: #fff
				.goodsScrollItem
					display: flex
					flex-direction: column
					justify-content: space-between
					// width: 140upx
					height: 80upx
					margin: 0 20upx
					.itemTop
						text-align: center
						white-space: nowrap
						padding: 0 4upx
						font-size: 26upx
						color: #fff
						background-color: #888
						border-radius: 20upx
						&.active
							background-color: #ff340f
					.itemBottom
						font-size: 24upx
						white-space: nowrap
						color: #999
						text-align: center
						&.active
							color: #ff340f
			image
				width: 100%
				height: 200upx
				margin-bottom: 16upx
			.goodsItem
				float: left
				width: 345upx
				margin-left: 20upx
				margin-bottom: 20upx
				border-radius: 40upx
				background-color: #fff
				image
					width: 345upx
					height: 345upx
					border-radius: 40upx
				.goodsItemInfo
					width: 305upx
					height: 112upx
					margin: 20upx
					.goodsItemDes
						font-size: 24upx
						color: #333
						overflow: hidden
						text-overflow: ellipsis
						display: -webkit-box
						-webkit-line-clamp: 2
						-webkit-box-orient: vertical
					.goodsPrice
						.qiLogo
							width: 28upx
							height: 30upx
							padding: 2upx
							border-radius: 4upx
							box-sizing: border-box
							font-size: 26upx
							color: #fff
							background-color: #ff3437
						.commonPic1
							width: 180upx
							font-size: 28upx
							color: #ff3437
							font-weight: 800
							margin-left: 6upx
						.commonPic2
							font-size: 24upx
							color: #888
							text-decoration: line-through
</style>









